<template>
    <div class="app-container">
        <el-dialog :title="props.titleName" v-model="isOpen" width="600px" append-to-body @closed="closed">
            <el-form ref="deptRef" :model="formdata" :rules="formRules" label-position="top">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="订单编号">
                            {{formdata.orderNo}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单金额（元）">
                            {{(formdata.orderPrice / 100).toFixed(2)}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单状态">
                            {{statusObj[formdata.orderStatus]}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="下单人">
                            {{formdata.orderBy}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="下单时间">
                            {{formdata.orderTime}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="下单备注">
                            {{formdata.orderRemark}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="订单备注">
                            {{formdata.remark}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发货人">
                            {{formdata.deliverBy}}
                        </el-form-item>
                    </el-col>                    
                    <el-col :span="12">
                        <el-form-item label="发货时间">
                            {{formdata.deliverTime}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="仓库地址">
                            {{formdata.warehouseInfo.address}}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm" :loading="isLoading">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
  
<script setup>

import {
    GetOrderDetail,
    // EditGoodsTag,
} from "@/api/orderList/index"
import { onMounted, reactive, toRefs } from "vue";
import { ElMessage } from 'element-plus'

const props = defineProps({
    titleName: {
        type: String,
        default: ""
    },
    isHide: {
        type: Boolean,
        default: false
    },
    dataInfo: {
        type: Object,
        default: () => { }
    }
})

let statusObj = ref({
    0:"待支付",
    1:"已支付",
    2:"待发货",
    3:"已取消",
    4:"已退款",
    5:"已完成",
  })

let isOpen = ref(false)
let isLoading = ref(false)

const emits = defineEmits(['update:isUpdateCreateHide','successAction'])

const cancel = () => {
    isOpen.value = false
}

const closed = () => {
    emits("update:isUpdateCreateHide", false)
}

const getOrderInfo = async () => {
    try {
        let data = await GetOrderDetail(props.dataInfo.id)
        for(let item in state.formdata){
            state.formdata[item] = data.data[item]
        }
    } catch (error) {
    }
}

const state = reactive({
    formdata: {
        orderNo:"",
        warehouseId:"",
        orderPrice:"",
        orderStatus:"",
        orderBy:"",
        orderTime:"",
        orderRemark	:"",
        remark:"",
        deliverBy:"",
        deliverTime:"",
        orderByUserInfo:"",
        orderGoodsList:"",
        orderAddress:"",
        warehouseInfo:"",
    },
    formRules: {

    }
})

const submitForm = () => {
    if (props.dataInfo.id) {
        updateWarehouse()
    } else {
        createWarehouse()
    }
}

const { formdata, formRules } = toRefs(state)

onMounted(() => {
    getOrderInfo()
    isOpen.value = props.isHide
})
</script>
  